<script setup lang="ts">
import type { IMetaWarehouse } from '@/api/interface/rescue/meta/metaWarehouse'
import { computed, onMounted, ref, watch } from 'vue'
import { getMetaWarehouseListApi } from '@/api/modules/rescue/meta/metaWarehouse'

interface Props {
  modelValue?: number | number[]
  multiple?: boolean
  placeholder?: string
  clearable?: boolean
  frequentWarehouseIds?: number[]
  maxWarehouseCount?: number
  size?: 'small' | 'default' | 'large'
  disabled?: boolean
  showSelectedWarehouses?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  multiple: false,
  placeholder: '请选择仓库',
  clearable: true,
  frequentWarehouseIds: () => [],
  maxWarehouseCount: 10,
  size: 'default',
  disabled: false,
  modelValue: undefined,
  showSelectedWarehouses: false,
})

const emit = defineEmits(['update:modelValue', 'change'])

// ============ 状态管理 ============
const loading = ref(false)
const showWarehousePicker = ref(false)

// ============ 数据状态 ============
const warehouseOptions = ref<IMetaWarehouse.Row[]>([])
const frequentWarehouses = ref<IMetaWarehouse.Row[]>([])
const selectedWarehouses = ref<number | number[]>(props.modelValue ?? (props.multiple ? [] : 0))
const searchQuery = ref('')

// ============ 分页相关 ============
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const hasMoreData = ref(false)

// ============ 计算属性 ============
const selectedWarehousesData = computed(() => {
  if (
    !selectedWarehouses.value ||
    (Array.isArray(selectedWarehouses.value) && selectedWarehouses.value.length === 0)
  ) {
    return []
  }

  const ids = Array.isArray(selectedWarehouses.value)
    ? selectedWarehouses.value
    : [selectedWarehouses.value]
  const allWarehouses = [...warehouseOptions.value, ...frequentWarehouses.value]

  return ids
    .map((id) => {
      const warehouse = allWarehouses.find((w) => w.id === id)
      return warehouse || { id, name: `仓库${id}`, address: '' }
    })
    .filter(Boolean)
})

const warehouseSelectorText = computed(() => {
  const count = selectedWarehousesData.value.length
  if (count === 0) return props.placeholder
  if (props.multiple) {
    return count === 1 ? selectedWarehousesData.value[0].name : `已选 ${count} 个仓库`
  }
  return selectedWarehousesData.value[0]?.name || props.placeholder
})

const sizeClass = computed(() => {
  const sizeMap = {
    small: 'warehouse-select--small',
    default: 'warehouse-select--default',
    large: 'warehouse-select--large',
  }
  return sizeMap[props.size]
})

// ============ 监听器 ============
watch(
  () => props.modelValue,
  (newVal) => {
    selectedWarehouses.value = newVal ?? (props.multiple ? [] : 0)
  },
  { immediate: true },
)

// ============ 数据加载函数 ============
async function loadWarehouseData() {
  loading.value = true
  try {
    const params: any = {
      enable: 'true',
      page: currentPage.value,
      limit: pageSize.value,
    }

    if (searchQuery.value && searchQuery.value.trim()) {
      params.name = searchQuery.value.trim()
    }

    const res = await getMetaWarehouseListApi(params)
    console.log('仓库数据响应:', res) // 调试日志

    if (currentPage.value === 1) {
      warehouseOptions.value = (res.data as any)?.rows || []
    } else {
      warehouseOptions.value = [...warehouseOptions.value, ...((res.data as any)?.rows || [])]
    }

    total.value = (res.data as any)?.total || 0
    hasMoreData.value = warehouseOptions.value.length < total.value

    console.log('仓库选项:', warehouseOptions.value) // 调试日志
  } catch (error) {
    console.error('获取仓库列表失败:', error)
    uni.showToast({
      title: '获取仓库列表失败',
      icon: 'none',
    })
  } finally {
    loading.value = false
  }
}

async function loadFrequentWarehouses() {
  if (!props.frequentWarehouseIds?.length) return

  try {
    const res = await getMetaWarehouseListApi({
      page: 1,
      limit: 100,
      enable: 'true',
    })

    if ((res.data as any)?.rows?.length) {
      frequentWarehouses.value = (res.data as any).rows.filter((warehouse: any) =>
        props.frequentWarehouseIds.includes(Number(warehouse.id)),
      )
    }
  } catch (error) {
    console.error('获取常用仓库失败:', error)
  }
}

async function loadMoreData() {
  if (loading.value || !hasMoreData.value) return
  currentPage.value++
  await loadWarehouseData()
}

// ============ 事件处理函数 ============
function handleSearch() {
  currentPage.value = 1
  loadWarehouseData()
}

function clearSearch() {
  searchQuery.value = ''
  handleSearch()
}

function toggleWarehouse(warehouseId: number) {
  if (props.multiple) {
    const ids = Array.isArray(selectedWarehouses.value) ? selectedWarehouses.value : []
    const index = ids.indexOf(warehouseId)

    if (index > -1) {
      ids.splice(index, 1)
    } else {
      if (ids.length < props.maxWarehouseCount) {
        ids.push(warehouseId)
      } else {
        uni.showToast({
          title: `最多选择${props.maxWarehouseCount}个仓库`,
          icon: 'none',
        })
        return
      }
    }
    selectedWarehouses.value = ids
  } else {
    selectedWarehouses.value = warehouseId
    showWarehousePicker.value = false
  }

  emit('update:modelValue', selectedWarehouses.value)
  emit('change', selectedWarehouses.value)
}

function removeWarehouse(warehouseId: number) {
  if (props.multiple) {
    const ids = Array.isArray(selectedWarehouses.value) ? selectedWarehouses.value : []
    const index = ids.indexOf(warehouseId)
    if (index > -1) {
      ids.splice(index, 1)
      selectedWarehouses.value = ids
    }
  } else {
    selectedWarehouses.value = 0
  }

  emit('update:modelValue', selectedWarehouses.value)
  emit('change', selectedWarehouses.value)
}

function isWarehouseSelected(warehouseId: number) {
  if (props.multiple) {
    return Array.isArray(selectedWarehouses.value) && selectedWarehouses.value.includes(warehouseId)
  } else {
    return selectedWarehouses.value === warehouseId
  }
}

function clearSelection() {
  if (props.multiple) {
    selectedWarehouses.value = []
  } else {
    selectedWarehouses.value = 0
  }

  emit('update:modelValue', selectedWarehouses.value)
  emit('change', selectedWarehouses.value)
}

// ============ 初始化 ============
onMounted(async () => {
  loading.value = true
  try {
    await Promise.all([loadFrequentWarehouses(), loadWarehouseData()])
  } catch (error) {
    console.error('初始化仓库选择器失败:', error)
  } finally {
    loading.value = false
  }
})

// ============ 暴露给父组件的方法 ============
defineExpose({
  clearSelection,
})
</script>

<template>
  <view
    class="warehouse-select-container"
    :class="[sizeClass, { 'warehouse-select--disabled': disabled }]"
  >
    <!-- 主选择器 -->
    <view class="main-selector">
      <view
        class="warehouse-trigger"
        :class="{ 'warehouse-trigger--active': showWarehousePicker }"
        @click="!disabled && (showWarehousePicker = true)"
      >
        <view class="trigger-content">
          <wd-icon name="home" class="trigger-icon" />
          <text
            class="trigger-text"
            :class="{ 'trigger-text--placeholder': selectedWarehousesData.length === 0 }"
          >
            {{ warehouseSelectorText }}
          </text>
        </view>
        <view class="trigger-actions">
          <wd-icon
            v-if="selectedWarehousesData.length > 0 && props.clearable"
            name="close"
            size="16"
            class="trigger-clear"
            @click.stop="clearSelection"
          />
          <wd-icon
            name="arrow-down"
            size="16"
            class="trigger-arrow"
            :class="{ 'trigger-arrow--active': showWarehousePicker }"
          />
        </view>
      </view>
    </view>

    <!-- 已选仓库显示 -->
    <view
      v-if="selectedWarehousesData.length > 0 && showSelectedWarehouses"
      class="selected-warehouses-display"
    >
      <!-- 多选模式下的清空按钮 -->
      <view v-if="props.multiple" class="clear-selection-section">
        <text class="selected-count">已选择 {{ selectedWarehousesData.length }} 个仓库</text>
        <wd-button type="text" size="small" class="clear-selection-btn" @click="clearSelection">
          <wd-icon name="delete" size="16" />
          <text class="clear-text">清空</text>
        </wd-button>
      </view>

      <!-- 单选模式下的已选仓库 -->
      <view v-if="!props.multiple" class="single-selection-display">
        <view class="selected-warehouse-info">
          <wd-icon name="home" class="info-icon" />
          <view class="info-content">
            <text class="info-title">已选择仓库</text>
            <text class="info-name">
              {{ selectedWarehousesData[0]?.name }}
            </text>
            <text v-if="selectedWarehousesData[0]?.address" class="info-address">
              {{ selectedWarehousesData[0]?.address }}
            </text>
          </view>
          <wd-button
            v-if="props.clearable"
            type="text"
            size="small"
            class="clear-selection-btn"
            @click="clearSelection"
          >
            <wd-icon name="delete" size="16" />
            <text class="clear-text">清空</text>
          </wd-button>
        </view>
      </view>

      <!-- 多选模式下的已选仓库列表 -->
      <template v-if="props.multiple">
        <view
          v-for="warehouse in selectedWarehousesData"
          :key="warehouse.id"
          class="selected-warehouse-chip"
          @click="removeWarehouse(warehouse.id)"
        >
          <wd-icon name="home" class="chip-icon" />
          <view class="chip-content">
            <text class="chip-name">
              {{ warehouse.name }}
            </text>
            <text v-if="warehouse.address" class="chip-address">
              {{ warehouse.address }}
            </text>
          </view>
          <text class="chip-remove">×</text>
        </view>
      </template>
    </view>

    <!-- 仓库选择弹窗 -->
    <wd-popup
      v-model="showWarehousePicker"
      position="bottom"
      :close-on-click-modal="true"
      custom-class="warehouse-picker-popup"
      :safe-area-inset-bottom="true"
    >
      <view class="picker-container">
        <!-- 头部 -->
        <view class="picker-header">
          <view class="picker-header-content">
            <view class="picker-header-left">
              <wd-button
                type="text"
                size="small"
                class="picker-close-btn"
                @click="showWarehousePicker = false"
              >
                <wd-icon name="close" size="20" />
              </wd-button>
            </view>
            <text class="picker-title">选择仓库</text>
            <view class="picker-header-right">
              <wd-button
                type="primary"
                size="small"
                class="picker-done-btn"
                @click="showWarehousePicker = false"
              >
                完成
              </wd-button>
            </view>
          </view>
        </view>

        <!-- 搜索框 -->
        <view class="picker-search">
          <view class="search-input-wrapper">
            <wd-icon name="search" size="16" class="search-icon" />
            <input
              v-model="searchQuery"
              class="search-input"
              placeholder="搜索仓库名称或地址..."
              @input="handleSearch"
            />
            <wd-icon
              v-if="searchQuery"
              name="close"
              size="16"
              class="search-clear"
              @click="clearSearch"
            />
          </view>
        </view>

        <!-- 仓库列表 -->
        <scroll-view class="picker-content" scroll-y @scrolltolower="loadMoreData">
          <!-- 常用仓库 -->
          <view v-if="frequentWarehouses.length > 0" class="warehouse-section">
            <text class="section-title">常用仓库</text>
            <view class="warehouse-grid">
              <view
                v-for="warehouse in frequentWarehouses"
                :key="`frequent-${warehouse.id}`"
                class="warehouse-item"
                :class="{ 'warehouse-item--selected': isWarehouseSelected(warehouse.id) }"
                @click="toggleWarehouse(warehouse.id)"
              >
                <view class="warehouse-content">
                  <view class="warehouse-header">
                    <wd-icon name="home" class="warehouse-icon" />
                    <text class="warehouse-name">
                      {{ warehouse.name }}
                    </text>
                    <wd-icon
                      v-if="isWarehouseSelected(warehouse.id)"
                      name="check"
                      size="16"
                      class="warehouse-check"
                    />
                  </view>
                  <text v-if="warehouse.address" class="warehouse-address">
                    {{ warehouse.address }}
                  </text>
                </view>
              </view>
            </view>
          </view>

          <!-- 所有仓库 -->
          <view v-if="warehouseOptions.length > 0" class="warehouse-section">
            <text class="section-title">
              {{ frequentWarehouses.length ? '全部仓库' : '仓库列表' }}
            </text>
            <view class="warehouse-grid">
              <view
                v-for="warehouse in warehouseOptions"
                :key="`all-${warehouse.id}`"
                class="warehouse-item"
                :class="{ 'warehouse-item--selected': isWarehouseSelected(warehouse.id) }"
                @click="toggleWarehouse(warehouse.id)"
              >
                <view class="warehouse-content">
                  <view class="warehouse-header">
                    <wd-icon name="home" class="warehouse-icon" />
                    <text class="warehouse-name">
                      {{ warehouse.name }}
                    </text>
                    <wd-icon
                      v-if="isWarehouseSelected(warehouse.id)"
                      name="check"
                      size="16"
                      class="warehouse-check"
                    />
                  </view>
                  <text v-if="warehouse.address" class="warehouse-address">
                    {{ warehouse.address }}
                  </text>
                </view>
              </view>
            </view>
          </view>

          <!-- 加载更多 -->
          <view v-if="hasMoreData" class="load-more-container">
            <view v-if="!loading" class="load-more-btn" @click="loadMoreData">
              <text class="load-more-text">加载更多</text>
              <wd-icon name="arrow-down" size="16" class="load-more-icon" />
            </view>
            <view v-else class="loading-indicator">
              <wd-loading size="16px" />
              <text class="loading-text">加载中...</text>
            </view>
          </view>

          <!-- 空状态 -->
          <view
            v-if="!loading && warehouseOptions.length === 0 && frequentWarehouses.length === 0"
            class="empty-state"
          >
            <wd-icon name="home" size="48" class="empty-icon" />
            <text class="empty-text">
              {{ searchQuery ? '暂无匹配仓库' : '暂无仓库数据' }}
            </text>
          </view>
        </scroll-view>
      </view>
    </wd-popup>
  </view>
</template>

<style scoped lang="scss">
// Apple 设计系统变量
:root {
  --apple-blue: #007aff;
  --apple-blue-light: #5ac8fa;
  --apple-blue-dark: #0056cc;
  --apple-gray: #8e8e93;
  --apple-gray-light: #c7c7cc;
  --apple-gray-dark: #48484a;
  --apple-red: #ff3b30;
  --apple-green: #34c759;
  --apple-background: #f2f2f7;
  --apple-surface: #ffffff;
  --apple-radius: 12px;
  --apple-radius-small: 8px;
  --apple-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --apple-shadow-elevated: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.warehouse-select-container {
  width: 100%;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  // 尺寸变化
  &--small {
    font-size: 14px;

    .warehouse-trigger {
      min-height: 40px;
      padding: 8px 12px;
    }
  }

  &--default {
    font-size: 16px;
  }

  &--large {
    font-size: 18px;

    .warehouse-trigger {
      min-height: 56px;
      padding: 16px 20px;
    }
  }

  &--disabled {
    opacity: 0.6;
    pointer-events: none;
  }

  // 主选择器样式
  .main-selector {
    .warehouse-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      background-color: var(--apple-surface);
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 12px;
      min-height: 52px;
      box-sizing: border-box;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      user-select: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

      .trigger-content {
        display: flex;
        align-items: center;
        flex: 1;
        gap: 10px;
      }

      .trigger-icon {
        color: var(--apple-blue);
        font-size: 20px;
      }

      .trigger-text {
        font-size: 16px;
        color: #1d1d1f;
        line-height: 1.4;
        font-weight: 500;

        &--placeholder {
          color: var(--apple-gray);
          font-weight: 400;
        }
      }

      .trigger-actions {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .trigger-clear {
        color: var(--apple-gray);
        transition: all 0.2s ease;
        cursor: pointer;
        padding: 4px;
        border-radius: 50%;

        &:hover {
          color: var(--apple-gray-dark);
          background-color: rgba(0, 0, 0, 0.05);
        }

        &:active {
          transform: scale(0.9);
        }
      }

      .trigger-arrow {
        color: var(--apple-gray);
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

        &--active {
          transform: rotate(180deg);
          color: var(--apple-blue);
        }
      }

      &:active {
        transform: scale(0.98);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
      }

      &--active {
        border-color: var(--apple-blue);
        box-shadow: 0 4px 20px rgba(0, 122, 255, 0.15);
      }
    }
  }

  // 已选仓库显示
  .selected-warehouses-display {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;

    .clear-selection-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      background-color: rgba(142, 142, 147, 0.08);
      border-radius: 10px;
      margin-bottom: 4px;

      .selected-count {
        font-size: 14px;
        font-weight: 500;
        color: var(--apple-gray);
      }

      .clear-selection-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background-color: rgba(255, 59, 48, 0.1);
        border-radius: 18px;
        border: none;
        transition: all 0.2s ease;

        &:active {
          background-color: rgba(255, 59, 48, 0.2);
          transform: scale(0.95);
        }

        wd-icon {
          color: var(--apple-red);
        }

        .clear-text {
          font-size: 13px;
          font-weight: 500;
          color: var(--apple-red);
        }
      }
    }

    .single-selection-display {
      .selected-warehouse-info {
        display: flex;
        align-items: center;
        padding: 16px 18px;
        background-color: rgba(0, 122, 255, 0.08);
        border: 1px solid rgba(0, 122, 255, 0.2);
        border-radius: 12px;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

        .info-icon {
          color: var(--apple-blue);
          margin-right: 12px;
          font-size: 20px;
        }

        .info-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 2px;

          .info-title {
            font-size: 13px;
            font-weight: 500;
            color: var(--apple-gray);
            line-height: 1.2;
          }

          .info-name {
            font-size: 16px;
            font-weight: 600;
            color: var(--apple-blue);
            line-height: 1.3;
          }

          .info-address {
            font-size: 14px;
            color: var(--apple-gray);
            line-height: 1.2;
          }
        }

        .clear-selection-btn {
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 6px 12px;
          background-color: rgba(255, 59, 48, 0.1);
          border-radius: 18px;
          border: none;
          transition: all 0.2s ease;

          &:active {
            background-color: rgba(255, 59, 48, 0.2);
            transform: scale(0.95);
          }

          wd-icon {
            color: var(--apple-red);
          }

          .clear-text {
            font-size: 13px;
            font-weight: 500;
            color: var(--apple-red);
          }
        }
      }
    }

    .selected-warehouse-chip {
      display: flex;
      align-items: center;
      padding: 14px 18px;
      background-color: rgba(0, 122, 255, 0.08);
      border: 1px solid rgba(0, 122, 255, 0.2);
      border-radius: 12px;
      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      cursor: pointer;
      overflow: hidden;

      &:active {
        transform: scale(0.96);
        background-color: rgba(0, 122, 255, 0.12);
      }

      .chip-icon {
        color: var(--apple-blue);
        margin-right: 10px;
        font-size: 18px;
      }

      .chip-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 3px;

        .chip-name {
          font-size: 15px;
          font-weight: 600;
          color: var(--apple-blue);
          line-height: 1.3;
        }

        .chip-address {
          font-size: 13px;
          color: var(--apple-gray);
          line-height: 1.2;
        }
      }

      .chip-remove {
        width: 24px;
        height: 24px;
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: bold;
        color: var(--apple-gray);
        margin-left: 8px;
        transition: all 0.2s ease;

        &:active {
          background-color: rgba(255, 59, 48, 0.2);
          color: var(--apple-red);
          transform: scale(0.9);
        }
      }
    }
  }
}

// 弹窗样式
:deep(.warehouse-picker-popup) {
  .picker-container {
    background-color: var(--apple-surface);
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
    max-height: 85vh;
    padding-bottom: 50px; // 底部安全空间
  }

  // 确保弹窗有正确的背景遮罩
  ::v-deep .wd-popup__mask {
    background-color: rgba(0, 0, 0, 0.4);
  }

  .picker-header {
    background-color: var(--apple-surface);
    border-bottom: 0.5px solid var(--apple-gray-light);

    .picker-header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      position: relative;
    }

    .picker-header-left {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .picker-header-right {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .picker-close-btn {
      width: 36px;
      height: 36px;
      border-radius: 18px;
      background-color: rgba(142, 142, 147, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      margin: 0;
      border: none;
      transition: all 0.2s ease;

      &:active {
        background-color: rgba(142, 142, 147, 0.2);
        transform: scale(0.95);
      }

      wd-icon {
        color: var(--apple-gray-dark);
      }
    }

    .picker-title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 17px;
      font-weight: 600;
      color: #1d1d1f;
      line-height: 1.4;
    }

    .picker-done-btn {
      background-color: var(--apple-blue);
      border-radius: 16px;
      padding: 8px 16px;
      font-weight: 600;
      border: none;
      color: white;
      font-size: 15px;
      line-height: 1.2;
      transition: all 0.2s ease;

      &:active {
        background-color: var(--apple-blue-dark);
        transform: scale(0.95);
      }
    }
  }

  .picker-search {
    padding: 16px 20px;
    background-color: var(--apple-surface);
    border-bottom: 0.5px solid var(--apple-gray-light);

    .search-input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      background-color: rgba(142, 142, 147, 0.12);
      border-radius: 10px;
      border: none;
      padding: 10px 12px;
      transition: all 0.2s ease;

      &:focus-within {
        background-color: rgba(142, 142, 147, 0.16);
        transform: scale(1.02);
      }

      .search-icon {
        color: var(--apple-gray);
        margin-right: 8px;
      }

      .search-input {
        flex: 1;
        border: none;
        outline: none;
        font-size: 16px;
        color: #1d1d1f;
        background: transparent;
        font-weight: 400;

        &::placeholder {
          color: var(--apple-gray);
        }
      }

      .search-clear {
        color: var(--apple-gray);
        cursor: pointer;
        padding: 4px;
        margin-left: 8px;
        transition: all 0.2s ease;
        border-radius: 50%;

        &:active {
          background-color: rgba(142, 142, 147, 0.2);
          transform: scale(0.9);
        }
      }
    }
  }

  .picker-content {
    max-height: 50vh;
    background-color: var(--apple-surface);
    padding-bottom: 20px;

    .warehouse-section {
      padding: 24px;
      border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);

      &:last-child {
        border-bottom: none;
        padding-bottom: 32px;
      }

      .section-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--apple-gray);
        margin-bottom: 16px;
        text-transform: uppercase;
        letter-spacing: 1.2px;
      }

      .warehouse-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .warehouse-item {
          background-color: var(--apple-surface);
          border-radius: 12px;
          border: 1px solid rgba(0, 0, 0, 0.05);
          transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          cursor: pointer;
          user-select: none;
          overflow: hidden;

          &:active {
            transform: scale(0.96);
          }

          &--selected {
            background-color: rgba(0, 122, 255, 0.08);
            border-color: var(--apple-blue);
            box-shadow: 0 4px 20px rgba(0, 122, 255, 0.15);
          }

          .warehouse-content {
            padding: 16px;

            .warehouse-header {
              display: flex;
              align-items: center;
              gap: 10px;
              margin-bottom: 6px;

              .warehouse-icon {
                color: var(--apple-blue);
                font-size: 20px;
              }

              .warehouse-name {
                flex: 1;
                font-size: 16px;
                font-weight: 600;
                color: #1d1d1f;
                line-height: 1.3;
              }

              .warehouse-check {
                color: var(--apple-blue);
                background-color: rgba(0, 122, 255, 0.1);
                border-radius: 50%;
                width: 24px;
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }

            .warehouse-address {
              font-size: 14px;
              color: var(--apple-gray);
              line-height: 1.4;
              margin-left: 30px;
            }
          }
        }
      }
    }

    .load-more-container {
      display: flex;
      justify-content: center;
      padding: 20px;

      .load-more-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 24px;
        background: rgba(0, 122, 255, 0.08);
        border: 1px solid rgba(0, 122, 255, 0.2);
        border-radius: 24px;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        cursor: pointer;

        &:active {
          background: rgba(0, 122, 255, 0.12);
          transform: scale(0.95);
        }

        .load-more-text {
          font-size: 15px;
          color: var(--apple-blue);
          font-weight: 600;
        }

        .load-more-icon {
          color: var(--apple-blue);
        }
      }

      .loading-indicator {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--apple-gray);
        font-size: 15px;
        padding: 12px 24px;
        background: rgba(142, 142, 147, 0.08);
        border-radius: 24px;

        .loading-text {
          color: var(--apple-gray);
          font-weight: 500;
        }
      }
    }

    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80px 20px;

      .empty-icon {
        color: var(--apple-gray-light);
        margin-bottom: 20px;
        opacity: 0.6;
      }

      .empty-text {
        font-size: 16px;
        color: var(--apple-gray);
        text-align: center;
        font-weight: 500;
        line-height: 1.4;
      }
    }
  }
}

// 深色模式适配
@media (prefers-color-scheme: dark) {
  :root {
    --apple-background: #000000;
    --apple-surface: #1c1c1e;
    --apple-gray: #8e8e93;
    --apple-gray-light: #48484a;
    --apple-gray-dark: #ebebf5;
    --apple-blue: #0a84ff;
    --apple-blue-light: #64d2ff;
    --apple-blue-dark: #0040dd;
  }
}

// 响应式断点
@media (max-width: 375px) {
  .warehouse-select-container {
    .warehouse-trigger {
      padding: 12px 14px;
    }

    .picker-content {
      .warehouse-section {
        padding: 16px;
      }
    }
  }
}
</style>
